<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Login Form Template</title>

    <!-- CSS -->
    <!-- <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> -->
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/form-elements.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">

</head>

<body>

<!-- Top content -->
<div class="top-content">

    <div class="">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2 text">
                    <h1><strong>人脸</strong> 注册</h1>
                    <div class="description">
                        <p>
                            请在光线清晰的条件按下录入——<a href="#"><strong>已有注册过请登陆</strong></a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="row col-sm-6 col-sm-offset-3 text">

                <video style="border-radius: 500px;border: 2px solid #8AC007;" id="video" width="250px" height="250px"
                       autoplay="autoplay"></video>
                <canvas id="canvas" width="500px" height="500px" hidden="hidden"></canvas>


            </div>
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 social-login">

                    <div class="form-group">
                        <label class="sr-only" for="form-username">用户名</label>
                        <input type="text" name="form-username" placeholder="请输入用户名..."
                               class="form-username form-control" id="form-username">
                    </div>
                    <button id="regist" class="btn">确认注册</button>

                </div>
            </div>
        </div>
    </div>

</div>
<div id="mask-dialogBox"></div>


<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script>
    let timer;
    let user_id;
    //获得video摄像头区域
    let video = document.getElementById("video");
    window.addEventListener(
        "DOMContentLoaded",
        function getMedia() {
            let constraints = {
                video: {width: 500, height: 500},
                audio: true
            };
            /*
            这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
            这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
            返回的是一个Promise对象。
            如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
            如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
            */
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(function (MediaStream) {
                video.srcObject = MediaStream;
                video.play();
                // timer = window.setInterval("takePhoto()",1000);

                document.getElementById("regist").addEventListener("click", function (e) {
                    user_id = $("#form-username").val();
                    console.log(user_id);
                    if ('' === user_id)
                    {
                        alert('请输入注册用户名！');
                        return;
                    }
                    takePhoto(user_id);

                });
            }).catch(function (PermissionDeniedError) {
                console.log(PermissionDeniedError);
                alert('请允许开启摄像头！');
            })
        },
        false
    );

    function takePhoto(user_id) {
        //获得Canvas对象
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0);
        let img_base64 = canvas.toDataURL("image/png");
        code_base64 = img_base64.split(',');
        console.log(code_base64[1]);
        $.ajax({
            url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=24.05506ccf760a569feab8db11623f3abd.2592000.1575028245.282335-17655547',//地址
            dataType: 'json',//数据类型
            type: 'POST',//类型
            timeout: 200000,//超时
            data: {
                image_type: 'BASE64',
                group_id: 'me',
                image: code_base64[1],
                user_id: user_id
            },
            //请求成功
            success: function (data, status) {
                // alert(data);
                console.log(data)
                // window.clearInterval(timer);
                //alert(status);
                if (data.error_msg ==='SUCCESS') {
                    if ( confirm('注册成功,点击确定前往登陆！'))
                        window.location = "login.html";
                }

            },
            //失败/超时
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // if(textStatus==='timeout'){
                //     alert('請求超時');
                //     setTimeout(function(){
                //         alert('重新请求');
                //     },2000);
                // }
                //alert(errorThrown);
            }
        });
    }
</script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->

</body>

</html>